<template>
	<view>
		<custom-header title="报价" :isHaveBack="false"></custom-header>
		<scroll-view scroll-x class="card-scroll-container" show-scrollbar="false">
			<view v-for="(item, index) in typeList" :key="index"
				:class="['type-item', selectedIndex === index ? 'active' : '']" @click="switchCardType(index)">
				{{ item.name }}
			</view>
		</scroll-view>
		<block v-for="(item, index) in cardList" :key="index">
			<view style="display: flex; justify-content: space-between; padding: 20rpx 40rpx;" @click="toCardList(item)">
				<view style="display: flex; align-items: center;">
					<image style="width: 120rpx; height: 120rpx;" :src="item.mimg" mode="aspectFit"></image>
					<view style="color: black; font-size: 28rpx; margin-left: 20rpx;">{{item.name}}</view>
				</view>
				
				<view style="display: flex; align-items: center;">
					<text style="font-size: 22rpx;">报价</text>
					<image src="../../static/images/arrow_right.png" style="width: 15rpx; height: 27rpx; margin-left: 10rpx;"></image>
				</view>
			</view>
			<view style="height: 2rpx; width: 100%; background-color: rgba(0, 0, 0, 0.09);"></view>
		</block>
		<custom-tabbar value="card-shop"></custom-tabbar>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getTypeList()
		},
		data() {
			return {
				typeList: [], //类型列表
				cardList: [], //卡片列表
				selectedIndex: 0, //类型下标
				typeId: null, //当前类型
			}
		},
		methods: {
			async getTypeList() {
				const res = await this.$http({
					method: 'GET',
					url: '/product/type/list',
				});

				if (res) {
					this.typeList = res.data.filter(item => item.name !== '热门回收');

					this.$nextTick(() => {
						this.typeId = this.typeList[0].id;
						this.getCardList();
					})
				}
			},
			switchCardType(index) {
				if (index == this.selectedIndex) return;
				this.selectedIndex = index;
				this.typeId = this.typeList[this.selectedIndex].id;

				this.getCardList();
			},
			async getCardList() {
				const res = await this.$http({
					method: 'GET',
					url: '/product/product/list',
					data: {
						prodTypeId: this.typeId
					}
				});

				if (res) {
					this.cardList = res.data;
				}
			},
			toCardList(item) {
				uni.setStorageSync('selectedItem', JSON.stringify(item));
				uni.navigateTo({
					url: '/pages/shop-detail/shop-detail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.card-scroll-container {
		margin-left: 20rpx;
		white-space: nowrap;
		margin-bottom: 20rpx;
		width: 100%;
		background-color: white;
		box-sizing: border-box;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

		.type-item {
			display: inline-block;
			padding: 20rpx 5rpx;
			margin-right: 45rpx;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.45);
			cursor: pointer;
			border-bottom: 4rpx solid transparent;
			border-radius: 2px;

			&.active {
				color: #4D7EF4;
				font-weight: 700;
				border-bottom-color: #4D7EF4;
			}
		}
	}
</style>